Faceting হলো ডেটা ভিজুয়ালাইজেশনে একটি শক্তিশালী কৌশল, যা ডেটার বিভিন্ন উপাদান বা সেগমেন্টকে আলাদা আলাদা সাবগ্রাফে ভাগ করে প্রদর্শন করে। এটি বিশ্লেষক বা দর্শকদের কাছে ডেটার সম্পর্ক এবং প্যাটার্ন সহজভাবে উপস্থাপন করতে সাহায্য করে। Google Charts-এ faceting সাধারণত গ্রাফের বিভিন্ন অংশের জন্য grid বা panel তৈরি করে ডেটাকে ভিন্ন ভিন্ন দৃষ্টিকোণ থেকে দেখানোর জন্য ব্যবহৃত হয়।
গুগল চার্টে faceting সাধারণত series, layout, এবং options ব্যবহার করে কাস্টমাইজ করা হয়, যা গ্রাফের বিভিন্ন প্যানেলে বা সাবগ্রাফে ডেটা ভাগ করতে সাহায্য করে।
এখানে, আমরা Google Charts-এ faceting এর জন্য layout এবং customization techniques ব্যবহার করার উপায় আলোচনা করব।
১. Faceting with Google Charts: Basic Layout
গুগল চার্টে faceting এর জন্য layout সেটিংস এবং series ব্যবহার করা হয়, যা বিভিন্ন ডেটা পয়েন্টকে আলাদা করে একাধিক প্যানেলে প্রদর্শন করতে সাহায্য করে।
উদাহরণ: Scatter Plot with Faceting
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Income', 'Gender'],
[22, 35000, 'Male'],
[23, 45000, 'Female'],
[24, 54000, 'Male'],
[25, 65000, 'Female'],
[26, 75000, 'Male'],
[27, 85000, 'Female'],
[28, 90000, 'Male'],
[29, 95000, 'Female']
]);
var options = {
title: 'Income vs Age',
hAxis: {title: 'Age'},
vAxis: {title: 'Income'},
series: {
0: { color: 'blue' }, // Male data
1: { color: 'red' } // Female data
},
layout: {
width: 900,
height: 500,
title: 'Faceting Scatter Plot' // Set overall chart title
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- series ব্যবহার করা হয়েছে আলাদা ভেরিয়েবলের জন্য রঙ নির্ধারণ করার জন্য।
- hAxis এবং vAxis ব্যবহার করা হয়েছে অক্ষের শিরোনাম কাস্টমাইজ করার জন্য।
- layout ব্যবহার করা হয়েছে চার্টের আকার এবং শিরোনাম কাস্টমাইজ করতে।
২. Multiple Faceting with Grid Layout
গুগল চার্টে আপনি faceting করতে চাইলে, একটি একক চার্টে grid ব্যবহার করে একাধিক সাবগ্রাফ তৈরি করতে পারেন। এটি সাধারণত grid এর মাধ্যমে ভিন্ন ভিন্ন গ্রুপের ডেটা বা সিরিজ দেখানোর জন্য ব্যবহার করা হয়।
উদাহরণ: Multiple Facets with Grid Layout
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', '2019', '2020'],
['Jan', 1000, 400],
['Feb', 1170, 460],
['Mar', 660, 1120],
['Apr', 1030, 540]
]);
var options = {
title: 'Monthly Revenue Comparison',
hAxis: {title: 'Month'},
vAxis: {title: 'Revenue'},
series: {
0: {color: '#e44c65'}, // 2019 data
1: {color: '#ffb843'} // 2020 data
},
layout: {
grid: {width: 800, height: 400}, // Grid layout with fixed width and height
title: 'Faceted Revenue Comparison'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- series ব্যবহার করা হয়েছে আলাদা গ্রুপ বা ভেরিয়েবল কাস্টমাইজ করতে।
- grid layout ব্যবহার করে গ্রাফের আকার এবং ক্ষেত্র কাস্টমাইজ করা হয়েছে।
৩. Faceting with Paneling using Chart Options
গুগল চার্টে faceting আরও কাস্টমাইজ করতে আপনি paneling এর মাধ্যমে একটি গ্রাফের মধ্যে ভিন্ন ভিন্ন প্যানেল তৈরি করতে পারেন, যেখানে প্রতিটি প্যানেল একটি আলাদা ডেটা বা সেগমেন্ট প্রদর্শন করে।
উদাহরণ: Faceting with Paneling in Bar Chart
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', '2020', '2021'],
['A', 1000, 1150],
['B', 800, 920],
['C', 600, 750]
]);
var options = {
title: 'Sales Comparison Between 2020 and 2021',
hAxis: {title: 'Category'},
vAxis: {title: 'Sales'},
seriesType: 'bars',
series: {
0: {color: '#b5e48c'}, // Color for 2020
1: {color: '#f4a261'} // Color for 2021
},
layout: {
width: 900, height: 500, title: 'Faceting Paneled Bar Chart'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- seriesType ব্যবহার করে বার গ্রাফ তৈরি করা হয়েছে।
- paneling নিশ্চিত করার জন্য ComboChart ব্যবহার করা হয়েছে, যাতে বিভিন্ন সেগমেন্ট বা প্যানেল পরিষ্কারভাবে আলাদা প্রদর্শিত হয়।
৪. Advanced Faceting with Gridlines and Annotations
ফেসেটিংয়ে গ্রিডলাইন এবং অ্যানোটেশন ব্যবহার করা একটি উন্নত কৌশল যা গ্রাফের প্রতিটি অংশের মধ্যে সঠিকভাবে পার্থক্য তুলে ধরে।
উদাহরণ: Faceting with Gridlines and Annotations
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', '2021', '2022'],
['January', 200, 250],
['February', 300, 350],
['March', 400, 450],
['April', 500, 550]
]);
var options = {
title: 'Yearly Sales Comparison',
hAxis: {title: 'Month'},
vAxis: {title: 'Sales'},
series: {
0: {color: '#76c7c0'},
1: {color: '#ff6f61'}
},
gridlines: {color: '#e0e0e0'}, // Adding gridlines
annotations: {
1: {style: 'line'} // Adding annotations for clearer comparison
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- gridlines কাস্টমাইজ করা হয়েছে গ্রিডলাইন রঙ পরিবর্তন করার জন্য।
- annotations ব্যবহৃত হয়েছে গ্রাফে অ্যানোটেশন যোগ করতে।
সারমর্ম
গুগল চার্টে faceting এবং layout কাস্টমাইজেশন ব্যবহার করে আপনি ডেটার বিভিন্ন অংশ বা সেগমেন্ট আলাদা গ্রাফের মাধ্যমে উপস্থাপন করতে পারেন। এটি ডেটার বিশ্লেষণে সাহায্য করে এবং পরিষ্কারভাবে প্রতিটি অংশের পার্থক্য দেখাতে সক্ষম করে। গুগল চার্টে series, layout, gridlines, এবং annotations ব্যবহার করে আপনি আপনার গ্রাফের উপস্থাপনা আরও পরিস্কার এবং আকর্ষণীয় করতে পারেন।
Read more
